:global {
  .ant-pro-basicLayout {
    > .ant-layout {
      > .ant-layout-header {
        background: #fff;
      }
      > .ant-pro-sider-menu-sider,
      > .ant-layout-sider-collapsed {
        max-height: 100vh;
        overflow-y: auto;
        position: relative;
        z-index: 1;
        &::-webkit-scrollbar {
          width: 6px;
          color: #1890ff;
          border-radius: 3px;
        }
        &::-webkit-scrollbar-thumb {
          width: 6px;
          background-color: #1890ff;
          border-radius: 3px;
        }
        > .ant-layout-sider-children {
          > .ant-pro-sider-menu-logo {
            height: 64px;
            position: fixed;
            width: 100%;
            padding-left: 6px;
            line-height: 64px;
            transition: all 0.3s;
            background: white;
            z-index: 2;

            .transition-right {
              animation: fadeIn 1s;
              -webkit-animation: fadeIn 1s;
              -moz-animation: fadeIn 1s;
              -o-animation: fadeIn 1s;
              -ms-animation: fadeIn 1s;
            }
            
            .transition-left {
               animation: fadeIn 1s;
               -webkit-animation: fadeIn 1s;
               -moz-animation: fadeIn 1s;
               -o-animation: fadeIn 1s;
               -ms-animation: fadeIn 1s;
            }
            
            
            @keyframes fadeIn {
              0% {
                opacity: 0;
              }
             
              100% {
                opacity: 1;
              }
            }
             
            @-ms-keyframes fadeIn {
              0% {
                opacity: 0;
              }
             
              100% {
                opacity: 1;
              }
            }
             
            @-o-keyframes fadeIn {
              0% {
                opacity: 0;
              }
             
              100% {
                opacity: 1;
              }
            }
             
            @-webkit-keyframes fadeIn {
              0% {
                opacity: 0;
              }
             
              100% {
                opacity: 1;
              }
            }
             
            @-moz-keyframes fadeIn {
              0% {
                opacity: 0;
              }
             
              100% {
                opacity: 1;
              }
            }
            img {
              display: inline-block;
              vertical-align: middle;
              height: 53px;
              width: 100%;
              object-fit: contain;
              margin: 0 auto;
            }
          }
          > .ant-menu-root {
            position: relative;
            top: 64px;
            z-index: 1;
          }
        }
      }
      > .ant-layout {
        max-height: 100vh;
        overflow-y: auto;
        position: relative;
        z-index: 3;
      }
    }
  }
  .ant-menu.ant-menu-dark {
    background: #40a9ff;
    .ant-menu-item {
      &:hover {
        background: #096dd9;
      }
      &:active {
        background: #91d5ff;
      }
    }
    .ant-menu-item-selected {
      background: #1890ff !important;
    }
  }
}
